/*******************************
            Toast
*******************************/

/* Container */
@toastContainerDistance: unit( (12 / 14px), em);

/* Toast */
@toastWidth: 300px;
@toastBorderRadius: 0.30769em;
@toastPadding: unit( (11 / 12), em) unit( (14 / 12), em);
@toastMarginBottom: 6px;
@toastMargin: 0 0 @toastMarginBottom;
@toastTextColor: rgba(255, 255, 255, 0.9);
@toastInvertedTextColor: rgba(0, 0, 0, 0.87);

/* on Hover */
@toastOpacityOnHover: 1;
@toastCursorOnHover: pointer;

/* Color variations */
@toastInfoColor: #31CCEC;
@toastWarningColor: #F2C037;
@toastErrorColor: #f03434;
@toastSuccessColor: #2ECC71;

/* Icon */
@toastIconContentPadding: 2em;
@toastIconVerticalAlign: middle;
@toastIconFontSize: 1.5em;

/* Content */
@toastContentVerticalAlign: middle;

/* Progressbar Colors */
@toastInfoProgressColor: darken(@toastInfoColor,15);
@toastWarningProgressColor: darken(@toastWarningColor,15);
@toastErrorProgressColor: darken(@toastErrorColor,15);
@toastSuccessProgressColor: darken(@toastSuccessColor,15);

/* Close Icon */
@toastCloseTopDistance: 0.3em;
@toastCloseRightDistance: 0.3em;
@toastCloseOpacity: 0.7;
@toastCloseTransition: opacity 0.1s ease;



/* -------------------------------------------------------------------------------------*/

/*******************************
        Toast container
*******************************/

.ui.toast-container {
    position: fixed;
    z-index: 9999;
}

.ui.top.right.toast-container {
    top: @toastContainerDistance;
    right: @toastContainerDistance;
    margin-left: @toastContainerDistance;
}

.ui.top.left.toast-container {
    top: @toastContainerDistance;
    left: @toastContainerDistance;
    margin-right: @toastContainerDistance;
}

.ui.top.center.toast-container {
    left: 50%;
    transform: translate(-50%, 0);
    top: @toastContainerDistance;
}

.ui.bottom.right.toast-container {
    bottom: @toastContainerDistance;
    right: @toastContainerDistance;
    margin-left: @toastContainerDistance;
}

.ui.bottom.left.toast-container {
    bottom: @toastContainerDistance;
    left: @toastContainerDistance;
    margin-right: @toastContainerDistance;
}

.ui.bottom.center.toast-container {
    left: 50%;
    transform: translate(-50%, 0);
    bottom: @toastContainerDistance;
}

/*******************************
            Toast
*******************************/

.toast {
    display: block;
    border-radius: @defaultBorderRadius;
    padding: @toastPadding;
    margin: @toastMargin;
    color: @toastTextColor;
}

.floating.toast,
.hoverfloating.toast:hover {
    box-shadow: @floatingShadow;
}

.hoverfloating.message:hover {
    box-shadow: 0 0 0 1px inset, @floatingShadow;
}

.center .toast-box,
.right .toast-box {
    margin-left: auto;
}

.center .toast-box {
    margin-right: auto;
}

.visible.toast-box,
.animating.toast-box,
.toast-box {
    display: table !important;
}


.toast-container .compact {
    display: block;
    width: @toastWidth;
}

.toast-container .message,
.toast:hover {
    opacity: @toastOpacityOnHover;
    cursor: @toastCursorOnHover;
}


.icon.toast .content {
    padding-left: @toastIconContentPadding;
}

.toast > .content > .header {
    font-weight: bold;
}

.info.toast {
    background-color: @toastInfoColor;
}

.warning.toast {
    background-color: @toastWarningColor;
}

.success.toast {
    background-color: @toastSuccessColor;
}

.error.toast {
    background-color: @toastErrorColor;
}

.toast-box .info.attached.progress .bar {
    background: @toastInfoProgressColor !important;
}

.toast-box .warning.attached.progress .bar {
    background: @toastWarningProgressColor !important;
}

.toast-box .success.attached.progress .bar {
    background: @toastSuccessProgressColor !important;
}

.toast-box .error.attached.progress .bar {
    background: @toastErrorProgressColor !important;
}

/*--------------
     Colors
-------------- */

/*each(@colors, {
  @color: replace(@key, '@', '');
  @c: @colors[@@color][color];
  @l: @colors[@@color][light];

  .@{color}.toast {
    background-color: @c;
  }
  .inverted.@{color}.toast,
  .toast-box .inverted.@{color}.attached.progress .bar {
    background-color: @l;
  }
})*/

.inverted.toast {
    color: @toastInvertedTextColor;
}

/*--------------
      Icon
---------------*/

.icon.toast > .icon:not(.close) {
    display: inline-block;
    vertical-align: @toastIconVerticalAlign;
    font-size: @toastIconFontSize;
    position: absolute;
    line-height: 1;
}



.icon.toast > .content {
    display: inline-block;
    vertical-align: @toastContentVerticalAlign;
}

/*---------------
   Progress Bar
 ----------------*/

.toast-box .attached.progress .bar {
    min-width: 0;
}

.toast-box .active.progress .bar:after {
    animation: progress-active 2s 0.1s infinite !important;
}

.toast-box {
    margin-bottom: @toastMarginBottom;
}

.toast-box .toast,
.toast-box .message {
    margin-top: 0;
    margin-bottom: 0;
    position: relative;
}

.toast-box .attached.progress {
    z-index: 1;
}

.toast-box .bottom.attached.progress {
    margin: -3px 0 @toastMarginBottom;
}

.toast-box .top.attached.progress {
    margin: @toastMarginBottom 0 -3px;
}

/* --------
 Close Icon
 -----------*/

.toast-box .message > .close.icon {
    top: @toastCloseTopDistance;
    right: @toastCloseRightDistance;
}


.toast-box .toast > .close.icon {
    cursor: pointer;
    position: absolute;
    margin: 0;
    top: @toastCloseTopDistance;
    right: @toastCloseRightDistance;
    opacity: @toastCloseOpacity;
    transition: @toastCloseTransition;
}

.toast-box .toast > .close.icon:hover {
    opacity: 1;
}

